﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="teacherList.aspx.cs" Inherits="NX5Web.admin.TeacherData.teacherList" %>



<div id="subApp" style="margin:15px;"> 


    <el-dialog
  v-model="dialogVisible"
  title="添加"
  width="500" 
>
  <div>
      <el-form  ref="form" :model="form" :rules="rules" label-width="auto" style="max-width: 600px">
         <%-- <el-form-item label="所属公司" prop="CompanyId"> 
              <el-select v-model="form.CompanyId">
                  <el-option v-for="(item,index) in CompanyList" :label="item.CompanyName" :value="item.ID"></el-option> 
              </el-select>
          </el-form-item> --%>
          <el-form-item label="类型" prop="TeacherType"> 
                <el-select v-model="form.TeacherType">
                    <el-option label="教务" value="1"></el-option> 
                    <el-option label="教师" value="2"></el-option> 
                    <%--<el-option label="陪练" value="3"></el-option>--%>  
                </el-select>
            </el-form-item> 
          <el-form-item v-if="form.TeacherType == 3" label="上级教师" prop="ParentId"> 
            <el-select v-model="form.ParentId">
                <el-option v-for="(item,index) in getType1" :label="item.TeacherName" :value="item.ID"></el-option> 
            </el-select>
        </el-form-item>  
          <el-form-item label="姓名" prop="TeacherName">
            <el-input  v-model="form.TeacherName"/>
          </el-form-item> 
           <el-form-item label="可以约课" prop="CanClass">
               <el-checkbox v-model="form.CanClass" label="勾选后可以约课" /> 
             </el-form-item> 
          <el-form-item label="常规课时费" prop="FeeRemeber">
              <el-input-number v-model="form.FeeRemeber" :min="1"/>
            </el-form-item>  
            <el-form-item label="保温课时费" prop="FeeReview">
              <el-input-number v-model="form.FeeReview" :min="1"/>
            </el-form-item>  
          <el-form-item label="电话" prop="Phone">
            <el-input v-model="form.Phone"/>
          </el-form-item>  
           <el-form-item label="分配账号" prop="UserName" v-if="mode=='new'">
             <el-input v-model="form.UserName" />
          </el-form-item>  
         <el-form-item label="有效期" prop="Period"> 
           <el-date-picker v-model="form.Period" type="date"></el-date-picker>
        </el-form-item>  
      </el-form>
  </div>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="AddTeacher()">
        确 定
      </el-button>
    </div>
  </template>
</el-dialog>


        <el-dialog v-model="feeshow"  title="申报条目明细" width="770"  > 
            <div>
                <el-date-picker
                    v-model="SBRANG"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期" 
                    @change="changeRange"
                 /> 
                
            </div>
            <el-table :data="FeeListData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" ></el-table-column>
                <el-table-column label="学生姓名"  width="120">
                  <template #default="scope">{{ scope.row.Name }}</template>
                </el-table-column>
                <el-table-column label="时间"  width="190">
                  <template #default="scope">{{ scope.row.StudyDay }}</template>
                </el-table-column>
                <el-table-column label="类型"  width="120">
                  <template #default="scope">{{ scope.row.LessonType==1?'常规课':'保温课' }}</template>
                </el-table-column>
                <el-table-column label="试用"  width="120">
                  <template #default="scope">{{ scope.row.IsTaste?'是':'否' }}</template>
                </el-table-column>
                <el-table-column label="课时费"  width="120">
                    <template #default="scope">{{ scope.row.FeeRMB }}</template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;font-size: 12px;font-weight: bold;padding-right: 100px;margin-top:10px;">
                本次申报费用合计:¥{{jsfee}}
            </div>
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="feeshow = false">取 消</el-button>
                <el-button type="primary" @click="ConfirmSettle()">
                  确 定
                </el-button>
              </div>
            </template>
     </el-dialog>



    <div style="    width: 100%;border-bottom: 1px solid #eee;padding-bottom: 5px;">
        <el-button type="primary" @click="showAddDia()">添 加</el-button>    
        <%--<el-button type="primary" @click="showAddDia()">导 出</el-button>--%> 
    </div>
    <div style="margin-top:10px;">
    <el-form :inline="true" :model="filterform" ref="filterform"> 
        <el-form-item label="姓名" prop="Name">
            <el-input v-model="filterform.Name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="TeacherType">
             <el-select v-model="filterform.TeacherType" style="width:100px;">
                 <el-option label="全部" :value="0"></el-option> 
                 <el-option label="教务" :value="1"></el-option> 
                 <el-option label="教师" :value="2"></el-option>  
             </el-select>
        </el-form-item>
        <el-form-item label="可约课" prop="CanClass">
            <el-select v-model="filterform.CanClass" style="width:100px">
                  <el-option label="全部" :value="0"></el-option>
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="2" ></el-option>
              </el-select>
        </el-form-item> 
        <el-form-item label="可申报" prop="CanSettle">
            <el-select v-model="filterform.CanSettle" style="width:100px">
                  <el-option label="全部" :value="0"></el-option>
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="2" ></el-option>
              </el-select>
        </el-form-item>  
         <el-form-item>
          <el-button type="primary" @click="resetFilter">重置</el-button>
        </el-form-item>
    </el-form>
</div>
    <div>
        <el-table :data="tableData" style="width: 100%">
           <%--<el-table-column type="selection" width="55" ></el-table-column>--%>
           <el-table-column label="姓名"  width="120">
             <template #default="scope">{{ scope.row.TeacherName }}</template>
           </el-table-column>
            <%--<el-table-column label="所属">
              <template #default="scope">{{ scope.row.CompanyName }}</template>
            </el-table-column>--%>
            <el-table-column label="类型"  width="120">
              <template #default="scope">{{ scope.row.TeacherType==1?'教务':scope.row.TeacherType==2?'教师':'陪练' }}</template>
            </el-table-column>
            <el-table-column label="可约课"  width="120">
              <template #default="scope">{{ scope.row.CanClass==1?'是':'否' }}</template>
            </el-table-column>
            <el-table-column label="课时标准"  width="120">
              <template #default="scope">¥{{ scope.row.FeeRemeber }} / ¥{{ scope.row.FeeReview }}</template>
            </el-table-column>
             <el-table-column label="电话 / 账号">
                <template #default="scope">{{ scope.row.Phone == scope.row.UserName?scope.row.UserName:(scope.row.Phone+' / '+scope.row.UserName) }}</template> 
             </el-table-column>
            <el-table-column label="未结算费用"  width="120">
              <template #default="scope">¥{{ scope.row.FeeRMB }}</template>
            </el-table-column> 
            <el-table-column label="有效期">
              <template #default="scope">{{ dateFormat(scope.row.Period) }}</template>
            </el-table-column>
            <%--<el-table-column label="创建日期">
              <template #default="scope">{{ dateFormat(scope.row.Created) }}</template>
            </el-table-column>--%>
           <el-table-column label="" width="210">
              <template #default="scope">
                <el-button size="small"  v-if="scope.row.Valid" @click="handleEdit(scope.$index, scope.row)">
                  编辑
                </el-button>
                  <el-button size="small" type="warning"  v-if="scope.row.Valid && scope.row.FeeRMB>0" @click="FREZ(scope.$index, scope.row)">
                  申报
                </el-button>
                <el-button v-if="scope.row.Valid"
                  size="small"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)"
                >
                  停用
                </el-button>
                  <el-button v-if="!scope.row.Valid"
                  size="small"
                  type="danger"
                  @click="handleReset(scope.$index, scope.row)"
                >
                  启用
                </el-button>
              </template>
            </el-table-column>
        </el-table>

        <div style="margin-top:10px;">
            <el-pagination
              v-model:current-page="pageIndex"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30, 40]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              @size-change="pageSizeChange"
              @current-change="pageNumberChange"
            />
        </div>
    </div> 
</div>
<script>
    var subApp = createApp({
        el: '#subApp',
        data() {
            return { 
                SBRANG:null,
                form: {
                    TeacherName: "",
                    Phone: "",
                    TeacherType: null,
                    FeeRemeber: 0,
                    FeeReview: 0, 
                    UserName: "",
                    CanClass:false,
                    Period: "",
                    ParentId:null
                },
                filterform: {
                    Name: null,
                    TeacherType: 0,
                    CanClass: 0,
                    CanSettle:0
                },
                jsfee:0,
                feeshow:false,
                mode:'new',
                rules: {
                    TeacherName: [
                        { required: true, message: '', trigger: 'blur' },
                        { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
                    ],
                    Phone: [
                        { required: true, message: '', trigger: 'blur' },
                        { min: 11, max: 11, message: '无效电话', trigger: 'blur' }
                    ],
                    TeacherType: [
                        { required: true, message: '', trigger: 'change' }
                    ],
                    UserName: [
                        { required: true, message: '', trigger: 'blur' },
                        { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' }
                    ],
                    Period: [
                        { type: 'date', required: true, message: '', trigger: 'blur' }
                    ],
                    ParentId: [
                        { required: true, message: '', trigger: 'change' }
                    ]
                },
                dialogVisible:false,
                TeacherList:[],
                CompanyList: [],
                ActiveItem: null,
                FeeList: [], 
                FeeListData:[],
                totalCount: 0,
                pageIndex: 1,
                pageSize: 10,
            };
        }, 
        computed: { 
            tableData() {  
                var temp = this.TeacherList.filter(x => {
                    return (
                        (this.filterform.Name == null || x.TeacherName.indexOf(this.filterform.Name) != -1)
                        && (this.filterform.TeacherType == 0 || x.TeacherType == this.filterform.TeacherType)
                        && (this.filterform.CanClass == 0 || x.CanClass == (this.filterform.CanClass==1?true:false))
                        && (this.filterform.CanSettle == 0 || (this.filterform.CanSettle == 1 ? (x.FeeRMB > 0) : (x.FeeRMB <= 0)))
                    );
                }); 
                this.totalCount = temp.length;

                return temp.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize);
            },
            getType1() {
                if (this.TeacherList == null) {
                    return [];
                }
                return this.TeacherList.filter(x => {
                    return x.TeacherType == 1
                })
            }

        },
        methods: { 
            changeRange() { 
                if (this.SBRANG == null) {
                    this.FeeListData = this.FeeList;
                } else {
                    var start = this.SBRANG[0];
                    var end = new Date(this.SBRANG[1].toString());
                    end = new Date(end.setDate(end.getDate() + 1));
                    var temp = this.FeeList.filter(x => {
                        return (new Date(x.StudyDay) >= start && new Date(x.StudyDay) <= end)
                    });
                    this.FeeListData = temp; 
                } 
            },
            resetFilter() {
                this.$refs.filterform.resetFields()
            },
            pageNumberChange(pageIndex) {
                this.pageIndex = pageIndex;
            },
            pageSizeChange(pageSize) {
                this.pageIndex = 1;
                this.pageSize = pageSize;
            },
            handleSelectionChange(val) {  
                this.jsfee = 0;
                for (var i = 0; i < this.FeeList.length; i++) {
                    this.FeeList[i]["Paid"] = false;
                    for (var j = 0; j < val.length; j++) {
                        if (this.FeeList[i]["ID"] == val[j]["ID"]) {
                            this.FeeList[i]["Paid"] = true;
                            this.jsfee += this.FeeList[i]["FeeRMB"];
                            break;
                        }
                    }
                }
            },
            ConfirmSettle() { 
                var PaidIds = [];
                for (var i = 0; i < this.FeeList.length; i++) {
                    if (this.FeeList[i]["Paid"]) {
                        PaidIds.push(this.FeeList[i]["ID"]);
                    }
                }
                if (PaidIds.length == 0) {
                    MsgBox("未选择结算条目");
                    return;
                } 
                loaddingPlus(true); 
                ktlapi({
                    "action": "Cus_LessSetle",
                    "data": {
                        LessonIds: PaidIds.toString()
                    }
                }).then(res => {
                    this.feeshow = false;
                    this.loadTeacher();
                    loaddingPlus(false);
                });
            },
            isValidPhoneNumber(phoneNumber) {
                // 中国大陆手机号（简化）
                const chinaRegex = /^1[3-9]\d{9}$/;
                // 美国手机号（简化）
                const usRegex = /^(\+?1\s?)?(\d{3})[-.]?(\d{3})[-.]?(\d{4})$/;
                // 英国手机号（简化）
                const ukRegex = /^(\+?44\s?7\d{3}|\(?07\d{3}\)?)\s?\d{3}\s?\d{3}$/;

                return chinaRegex.test(phoneNumber) || usRegex.test(phoneNumber) || ukRegex.test(phoneNumber);
            },
            FREZ(index,row) {
                //FeeList
                this.ActiveItem = row;
                loaddingPlus(true);
                console.log(row);
                var user = new ktluser();
                ktlapi({
                    "action": "Cus_LessFeeDetail",
                    "data": {
                        TeacherId: row.ID
                    }
                }).then(res => {
                    this.FeeList = res.data;
                    console.log(res);
                    this.feeshow = true;
                    this.changeRange();
                    loaddingPlus(false);
                });
            },
            AddTeacher() {
                var user = new ktluser();
                this.$refs.form.validate((valid, fields) => {
                    if (valid) {
                        var proc = '';
                        var data = {};
                        if (this.mode == 'new') {
                            if (!this.isValidPhoneNumber(this.form.Phone) || !this.isValidPhoneNumber(this.form.UserName)) {
                                MsgBox("手机号无效");
                                return;
                            }
                            proc = 'Cus_AddTeacher';
                            data = {
                                CompanyId: user.userInfo().CompanyId,
                                "TeacherName": this.form.TeacherName,
                                "TeacherType": this.form.TeacherType,
                                "FeeRemeber": this.form.FeeRemeber,
                                "FeeReview": this.form.FeeReview,
                                "Phone": this.form.Phone,
                                "UserName": this.form.UserName,
                                "CanClass": this.form.CanClass ? 1 : 0,
                                "ParentID": this.form.ParentId == null ? 0 : this.form.ParentId,
                                "Period": dateFormat(this.form.Period),
                            }
                        } else {
                            if (!this.isValidPhoneNumber(this.form.Phone)) {
                                MsgBox("手机号无效");
                                return;
                            }
                            proc = 'Cus_EditTeacher';
                            data = {
                                "ID": this.ActiveItem.ID,
                                "TeacherName": this.form.TeacherName,
                                "TeacherType": this.form.TeacherType,
                                "FeeRemeber": this.form.FeeRemeber,
                                "FeeReview": this.form.FeeReview,
                                "Phone": this.form.Phone,
                                "CanClass": this.form.CanClass ? 1 : 0,
                                "ParentID": this.form.ParentId == null ? 0 : this.form.ParentId,
                                "Period": dateFormat(this.form.Period),
                            }
                        }
                        loaddingPlus(true);
                        ktlapi({
                            "action": proc,
                            "data": data
                        }).then(res => {
                            if (this.mode == 'new') {
                                if (res.data[0]["code"] == 0) {
                                    MsgBox.error(res.data[0]["err"]);
                                    return;
                                }
                                this.loadTeacher();
                            } else {
                                if (res.data[0]["code"] == 0) {
                                    MsgBox.error(res.data[0]["err"]);
                                    return;
                                }
                                this.ActiveItem.TeacherName = this.form.TeacherName;
                                this.ActiveItem.TeacherType = this.form.TeacherType;
                                this.ActiveItem.FeeRemeber = this.form.FeeRemeber;
                                this.ActiveItem.FeeReview = this.form.FeeReview;
                                this.ActiveItem.Phone = this.form.Phone;
                                this.ActiveItem.ParentID = this.form.ParentID;
                                this.ActiveItem.Period = this.form.Period;
                                this.ActiveItem.CanClass = this.form.CanClass;
                            }
                            this.$refs.form.resetFields()
                            this.dialogVisible = false;
                            loaddingPlus(false);
                        });
                    } else {
                        console.log('error submit!', fields)
                    }
                }); 
            },
            handleEdit(index, row) {
                console.log(index, row)
                this.mode = 'edit';

                this.ActiveItem = row;
                this.form.TeacherName = row["TeacherName"];
                this.form.TeacherType = row["TeacherType"].toString();
                this.form.FeeRemeber = row["FeeRemeber"];
                this.form.FeeReview = row["FeeReview"];
                this.form.Phone = row["Phone"];
                this.form.ParentID = row["ParentId"].toString();
                this.form.Period = row["Period"];
                this.form.CanClass = row["CanClass"];

                this.dialogVisible = true; 
                this.ActiveItem = row;
            },
            handleReset(index, row) {
                if (window.confirm("是否启用该条目?")) {
                    loaddingPlus(true);
                    ktlapi({
                        "action": "Cus_ResetTeacher",
                        "data": {
                            "ID": row.ID
                        }
                    }).then(res => {
                        if (res.data[0]["code"] == 0) {
                            MsgBox.error(res.data[0]["err"]);
                            return;
                        }
                        row.Valid = true;

                        loaddingPlus(false);
                    });
                }
            },
            handleDelete(index,row) {
                 
                if (window.confirm("是否停用该条目?")) {
                    loaddingPlus(true);
                    ktlapi({
                        "action": "Cus_DeleteTeacher",
                        "data": {
                            "ID": row.ID
                        }
                    }).then(res => {
                        row.Valid = false;

                        loaddingPlus(false);
                    });
                }
            },
            showAddDia() {
                //loaddingPlus(true);
                //ktlapi({
                //    "action": "Cus_GetAllCompanyList",
                //    "data": {}
                //}).then(res => {
                //    this.CompanyList = res.data;
                //    loaddingPlus(false);
                //});
                this.mode = 'new';
                var user = new ktluser();
                loaddingPlus(true);
                ktlapi({
                    "action": "Cus_GetBaseFee",
                    "data": {
                        CompanyId: user.userInfo().CompanyId
                    }
                }).then(res => {  
                    loaddingPlus(false);
                    console.log(res);
                    if (res.data.length == 0) {
                        alert('未设置基础课时费');
                        return;
                    }
                    this.dialogVisible = true;
                    this.form.FeeRemeber = res.data[0]["RememberFee"];
                    this.form.FeeReview = res.data[0]["ReviewFee"];
                });

                

            },
            loadTeacher() {
                loaddingPlus(true);
                var user = new ktluser();
                ktlapi({
                    "action": "Cus_GetCompanyTeacherList",
                    "data": {
                        CompanyId: user.userInfo().CompanyId
                    }
                }).then(res => {
                    this.TeacherList = res.data;
                    loaddingPlus(false);
                });
            },
            init() { 
                this.loadTeacher();
            }
        },
        mounted: function () {
            this.init();
        }
    });
</script>